<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hey girl，please login.</title>
    <link href="img/icon2.png" rel="shortcut icon" type="image/x-icon">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        video {
            position: fixed;
            right: 0;
            bottom: 0;
            min-width: 100%;
            min-height: 100%;
            width: auto;
            height: auto;
            z-index: -1;
        }



        #login {
            background-color: rgba(0, 0, 0, 0.212);
            width: 618px;
            height: 374px;
            margin: 80px auto;
            /* border: 2px dashed pink; */
        }


        .title {
            font: 20px 微软雅黑;
            margin-top: 20px;
            text-align: center;
            color: #333333;
            transition: color 0.5s;
            -moz-transition: color 0.5s;
            /* Firefox 4 */
            -webkit-transition: color 0.5s;
            /* Safari and Chrome */
            -o-transition: color 0.5s;
            /* Opera */
        }

        .title:hover {
            color: rgba(255, 0, 0, 0.438);
            font-weight: bold;
        }

        .tips {
            font: 16px 微软雅黑;
            margin-top: 20px;
            text-align: center;
            color: #666666;
            transition: color 0.5s;
            -moz-transition: color 0.5s;
            /* Firefox 4 */
            -webkit-transition: color 0.5s;
            /* Safari and Chrome */
            -o-transition: color 0.5s;
            /* Opera */

            transition: letter-spacing 0.5s;
            -moz-transition: letter-spacing 0.5s;
            /* Firefox 4 */
            -webkit-transition: letter-spacing 0.5s;
            /* Safari and Chrome */
            -o-transition: letter-spacing 0.5s;
            /* Opera */
        }

        .tips:hover {
            /* color: rgba(0, 0, 255, 0.603); */
            letter-spacing: 4px;
        }

        .img {
            height: 91px;
            margin-top: 20px;
            text-align: center;
        }

        #img1 {
            width: 70px;
            /* border: 1px solid skyblue; */
            border-radius: 50%;
            cursor: move;
            transition: width 0.5s;
            -moz-transition: width 0.5s;
            /* Firefox 4 */
            -webkit-transition: width 0.5s;
            /* Safari and Chrome */
            -o-transition: width 0.5s;
            /* Opera */
        }

        #img1:hover {
            width: 91px;
            border: 2px solid rgba(0, 0, 0, 0.342);
        }

        #s1 {
            transition: font-size 0.5s;
            -moz-transition: font-size 0.5s;
            /* Firefox 4 */
            -webkit-transition: font-size 0.5s;
            /* Safari and Chrome */
            -o-transition: font-size 0.5s;
            /* Opera */
        }

        /* #s1:hover {
            font-size: 25px;
        } */

        #s2 {
            transition: font-size 0.5s;
            -moz-transition: font-size 0.5s;
            /* Firefox 4 */
            -webkit-transition: font-size 0.5s;
            /* Safari and Chrome */
            -o-transition: font-size 0.5s;
            /* Opera */
        }

        /* #s2:hover {
            font-size: 25px;
        } */


        .login {
            margin-top: 20px;
            font: 8px 微软雅黑;
            text-align: center;
            color: #666666;
        }



        #username {
            height: 20px;
            background-color: #ffffff00;
            border-top: 0;
            border-left: 0;
            border-right: 0;
            outline: none;
            color: rgba(255, 192, 203, 0.664);
            font-size: 16px;
        }



        #pwd {
            height: 20px;
            background-color: #ffffff00;
            border-top: 0;
            border-left: 0;
            border-right: 0;
            outline: none;
            color: rgba(255, 192, 203, 0.664);
            font-size: 16px;
        }

        #btn {
            cursor: pointer;
            width: 80px;
            height: 30px;
            border-radius: 30px;
            background-color: rgba(255, 0, 0, 0.473);
}
            #btn:hover {
            background-color: rgba(0, 255, 0, 0.473);
            }
        
    </style>
    <script>
        window.onload = function () {
            var btn = document.getElementById("btn");
            var username = document.getElementById("username");
            var pwd = document.getElementById("pwd");
            var s1 = document.getElementById("s1");
            var s2 = document.getElementById("s2");
            var loading = document.getElementById("loading");
            function tiaozhuan() {
                location.href = "page.html";
            }
            btn.onclick = function () {
                if (username.value == "admin" && pwd.value == "123") {
                    loading.innerHTML = '<img src="img/loading2.gif" alt="" width="50px">';
                    btn.style.backgroundColor = "rgb(0, 128, 0)";
                    window.setTimeout(tiaozhuan, 5000);
                } else {
                    alert("Incorrect username or password,please login again.");
                    // username.value = "";
                    pwd.value = "";
                }

            }


            username.onfocus = function () {
                s1.style.fontSize = "25px";
            }
            username.onblur = function () {
                s1.style.fontSize = "12px";
            }
            pwd.onfocus = function () {
                s2.style.fontSize = "25px";
            }
            pwd.onblur = function () {
                s2.style.fontSize = "12px";
            }
            s1.onmouseover = function () {
                s1.style.fontSize = "25px";
            }
            s1.onmouseout = function () {
                s1.style.fontSize = "12px";
            }
            s2.onmouseover = function () {
                s2.style.fontSize = "25px";
            }
            s2.onmouseout = function () {
                s2.style.fontSize = "12px";
            }
        }



    </script>
</head>

<body>
    <video autoplay muted loop style="width:100%" id="v1">
        <source src="img/bg2.mp4">
    </video>
    <div id="login">
        <div class="title">快速安全登录</div>
        <div class="tips">请输入账号密码进行登录，<br>安全登录，防止盗号。</div>
        <div class="img"> <img src="img/user.jpg" alt="" id="img1"></div>
        <!-- <div class="login"> <a href="#" id="clickIt"> 账号密码登录</a></div> -->
        <div class="login">
            <span id="s1">username:</span><input type="text" id="username" value="admin"><br><br>
            <span id="s2">password:</span><input type="password" id="pwd"><br><br>
            <button id="btn">login</button>
            <div id="loading"></div>
        </div>
    </div>
    <script>

        var video = document.getElementById('v1');

        video.playbackRate = 2;

    </script>
</body>

</html>